<template>
    <div>
        <el-dialog
            :title="$t('site.siteEdit.title')"
            :visible="visibleEdit"
            v-if="visibleEdit"
            width="850px"
            @close="()=>{$store.commit('setVisibleEdit',false)}">
            <el-row :gutter="24">
                <el-col  :span="ifSummerTime&&checkVisible?13:20">
                    <el-form ref="form" :model="form" label-width="200px" >
                        <el-form-item :label="$t('site.siteName')" prop="siteName" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_siteName,trigger:'blur'}]">
                            <el-input v-model="form.siteName" ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('country')" prop="nation" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.nation" filterable :placeholder="$t('pleaseSelect')" @change='changeData(2,form.nation)'>
                                <el-option
                                v-for="item in selectCountryData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('timeZone')" prop="timeZone" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.timeZone" filterable :placeholder="$t('pleaseSelect')" @change="changeTimezone">
                                <el-option
                                v-for="item in selectTimezoneData"
                                :key="item.timeZoneValue"
                                :label="item.timeZone"
                                :value="item.timeZoneValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="NMI" prop="nmi" v-if="form.nation=='AUSTRALIA'" :rules="[{ required: form.matchNmi, message: $t('index_js_notNull')},{validator:test_nmi,trigger:'blur'}]">
                            <span slot='label'><el-checkbox v-model="form.matchNmi" @change='changeNmiModal'></el-checkbox> NMI</span>
                            <el-input v-model="form.nmi" placeholder="" :disabled="!form.matchNmi"></el-input>
                            <el-tooltip class="icon-nmi" placement="top">
                                <div slot="content">
                                    The National Metering Identifier (NMI) is a unique 10 or 11 digit number used to identify every electricity network connection point in Australia.<br>You can find your NMI on your electricity bill.
                                </div>
                                <i class="el-icon-question iconClass"></i>
                            </el-tooltip>
                            <!-- <el-checkbox v-model="form.matchNmi" class="nmi_checkbox">{{$t('nmi_checkbox')}}</el-checkbox> -->
                        </el-form-item>
                        <el-form-item :label="$t('site.capacity')" prop="capacity" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_capacity,trigger:'blur'}]">
                            <el-input v-model="form.capacity" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('location')" required>
                            <el-input v-model="form.address" v-show="form.address!=''" class="pull-left" style="width:calc(100% - 24px)" readonly></el-input>
                            <i class="iconfont icon-marker-site pull-left icon-marker" @click="showMap()"></i>
                        </el-form-item>
                        <el-form-item :label="$t('introduce')">
                            <el-input v-model="form.instroduce" type="textarea" placeholder=""></el-input>
                        </el-form-item>
                        
                    </el-form>
                </el-col>
                <el-col :span="11" v-if="ifSummerTime&&checkVisible">
                    <!--夏令时按星期-->
                    <span class="label-inline">{{$t('index.type')}}</span>
                    <el-select v-model="summerType" filterable :placeholder="$t('pleaseSelect')" @change="changeSummerType">
                        <el-option v-for="item in summerTimeData.SUMMER_TYPE" :key="item.value" :label="item.code" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-form class="form" ref="summer_form1" :model="summer_form1" label-width="10" v-if="summerType=='1'">
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.startTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_summerMonth" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerMonth" filterable :placeholder="$t('month')">
                                        <el-option v-for="item in summerTimeData.MONTH" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_summerSort" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerSort" filterable :placeholder="$t('site.sort')">
                                        <el-option v-for="item in summerTimeData.SORT_TYPE" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item prop="start_summerNum" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerNum" filterable :placeholder="$t('site.week_num')">
                                        <el-option v-for="item in summerTimeData.NOWEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_summerWeek" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerWeek" filterable :placeholder="$t('week')">
                                        <el-option v-for="item in summerTimeData.WEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                             <el-col :span="24">
                                 <el-form-item prop="start_summer_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker
                                        v-model="summer_form1.start_summer_hour"
                                        format="HH:mm"
                                        value-format="HH:mm"
                                        placeholder="00:00">
                                    </el-time-picker>
                                 </el-form-item>
                             </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.endTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_summerMonth" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerMonth" filterable :placeholder="$t('month')">
                                        <el-option v-for="item in summerTimeData.MONTH" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_summerSort" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerSort" filterable :placeholder="$t('site.sort')">
                                        <el-option v-for="item in summerTimeData.SORT_TYPE" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item prop="end_summerNum" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerNum" filterable :placeholder="$t('site.week_num')">
                                        <el-option v-for="item in summerTimeData.NOWEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_summerWeek" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerWeek" filterable :placeholder="$t('week')">
                                        <el-option v-for="item in summerTimeData.WEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                             <el-col :span="24">
                                <el-form-item prop="end_summer_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker 
                                        v-model="summer_form1.end_summer_hour" 
                                        format="HH:mm" 
                                        value-format="HH:mm" 
                                        placeholder="00:00">
                                    </el-time-picker>
                                </el-form-item>
                             </el-col>
                        </el-row>
                    </el-form>
                    <!--夏令时按日期-->
                    <el-form class="form" ref="summer_form2" :model="summer_form2" label-width="0" v-if="summerType=='2'">
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.startTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_month" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-date-picker 
                                        v-model="summer_form2.start_month" 
                                        type="date" 
                                        format="MM-dd"
                                        value-format="MM-dd"
                                        placeholder="01-01">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker 
                                        v-model="summer_form2.start_hour" 
                                        format="HH:mm" 
                                        value-format="HH:mm"
                                        placeholder="00:00">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.endTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_month" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-date-picker 
                                        v-model="summer_form2.end_month" 
                                        format="MM-dd"
                                        value-format="MM-dd"
                                        placeholder="01-01">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker 
                                        v-model="summer_form2.end_hour" 
                                        format="HH:mm" 
                                        value-format="HH:mm"
                                        placeholder="00:00">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>
            <el-row style="margin-left:100px">
                <div class="marginbottom_10">
                    <el-checkbox v-model="ifSummerTime" v-show="checkVisible">{{$t('index.summerTimmer')}}</el-checkbox>
                </div>
                <div>
                    <el-checkbox v-model="form.authorizeFlag" :true-label="1" :false-label="0">{{$t('site.js_isnot_authorize')}}</el-checkbox>
                </div>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleEdit',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog
        :title="$t('common.update')"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal='false'
        >
        <span>{{$t('unbindCode-not-msg')}}</span>
        <el-input v-model="unbindCode" style="width:80%;margin-top:15px;text-align:center;"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="spannmiValidateUnbindCode">{{$t('save')}}</el-button>
        </span>
        </el-dialog>
        <baseBaiduMapSite :mapData='mapData' :address='form.address' @getPoint='getPoint'></baseBaiduMapSite>
        <baseGoogleMapSite :mapData='mapData' :address='form.address' @getPoint='getPoint'></baseGoogleMapSite>
    </div>
</template>

<script>
import baseBaiduMapSite from '../../components/map/baseBaiduMapSite'
import baseGoogleMapSite from '../../components/map/baseGoogleMapSite'
export default {
    components: {
        baseBaiduMapSite,
        baseGoogleMapSite,
    },
    props:{
        editId:''
    },
    data() {
        this.test_siteName = async(rule, value, callback) => {
            if(value.indexOf('"')>=0||value.indexOf("'")>=0){
                callback(new Error(this.$t('site.addSite.siteNameMsg')));
            }else{
                callback();
            }
        }
        this.test_nmi = async(rule, value, callback) => {
            let res = await this.API.siteCheckNmi({nmi:this.form.nmi})
            if (res.object == '1') {
                callback(new Error(this.$t('NMI.importModalMsg1G')));
            }else{
                callback();
            }
        }
        this.test_capacity = async(rule, value, callback) => {
            if(!this.Regs.num_reg.test(value)){
                callback(new Error(this.$t('site.js_capacity_rule')));
            }else{
                callback();
            }
        }
        this.test_zero = async(rule, value, callback) => {
            if(value==='请选择'){
                callback(new Error(this.$t('pleaseSelect')));
            }else{
                callback();
            }
        }
        return {
            mapType:localStorage.getItem('mapType'),
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            userId:JSON.parse(sessionStorage.getItem('userObj')).ids,
            form:{
                siteName:'',
                nation:'',
                timeZone:'',
                capacity:'',
                postcode:'',
                province:'',
                city:'',
                county:'',
                town:'',
                address:'',
                instroduce:'',
                longitude:'',
                latitude:'',
                updateTime:'',
                nmi:'',
                matchNmi:true,
                authorizeFlag:0,
            },
            mapToolType:'',
            mapData:{
                width:'100%',
                height:'500px',
                zoom:10,
                center:{
                    lng:102,
                    lat:23
                },
                mapObj:{},//地图对象
                markers:{},//地图上所有的标记
            },
            loading:false,
            selectCountryData:[],
            selectSiteOwnData:[],
            selectTimezoneData:[],
            selectPackagesData:[],
            selectProvinceData:[],
            summerTimeData:{
                SUMMER_TYPE:[],
                MONTH:[],
                SORT_TYPE:[],
                WEEK:[],
                NOWEEK:[],
            },//夏令时
            selectCityData:[],
            selectCountyData:[],
            selectTownData:[],
            summer_form1:{
                start_summerMonth:'',
                start_summerSort:'',
                start_summerNum:'',
                start_summerWeek:'',
                start_summer_hour:'00:00',
                end_summerMonth:'',
                end_summerSort:'',
                end_summerNum:'',
                end_summerWeek:'',
                end_summer_hour:'00:00',
            },
            summer_form2:{
                start_month:'',
                start_hour:'00:00',
                end_month:'',
                end_hour:'00:00'
            },
            summerType:'1',
            
            isChina:false,
            checkVisible:false,
            ifSummerTime:false,
            test_siteName:{},
            test_capacity:{},
            test_zero:{},
            dialogVisible:false,
            unbindCode:''
        };
    },
    computed: {
        visibleEdit(){
            return this.$store.state.sysStore.visibleEdit
        }
    },
    watch:{
        visibleEdit:{
            async handler(nv,ov){
                if(nv==true){
                    console.log(this.editId)
                    let id=this.editId
                    let res = await this.API.getSiteData({
                        id:id
                    })
                    for(let key in this.form){
                        this.form[key]=res[key];
                    }
                    if(res['capacity']!=null){
                        this.form.capacity=res['capacity'].toString()
                    }
                    if(res.nation=='中国'){
                        this.isChina=true
                        this.changeData(2,res.nation,false)
                        this.changeData(3,res.province,false);
                        this.changeData(4,res.country,false)
                        this.changeData(5,res.town,false);
                    }else{
                        this.isChina=false
                    }
                    if(res.timeZone!=''){
                        this.changeTimezone(res.timeZone)
                    } 
                    console.log(this.form.authorizeFlag)
                    this.form.ids=id
                }
            }
        }
    },
    mounted(){
        this.selectCountry()
        this.selectTimezone()
        this.getDictionaryBatch()
    },
    methods: {
        async spannmiValidateUnbindCode(){
            if(!this.unbindCode){
                this.comm.showMsg(false,this.$t('unbindCode-not-null'))
                return
            }
            let res = await this.API.spannmiValidateUnbindCode({
                unbindCode:this.unbindCode
            })
            if(this.comm.showMsg(res.success)){
                this.dialogVisible = false
                this.form.matchNmi = false
                this.form.nmi = ''
            }else{
                this.form.matchNmi = true
            }
        },
        changeNmiModal(){
            if(!this.form.matchNmi){
                this.dialogVisible = true
                this.form.matchNmi = true
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'CHINA_DES,SUMMER_TYPE,MONTH,SORT_TYPE,WEEK,NOWEEK',
                lang:localStorage.getItem('lang')
            })
            this.summerTimeData=res
        },
        async selectCountry(){
            let res = await this.API.selectCountry()
            this.selectCountryData = res || []
        },
        async selectTimezone(){
            let res = await this.API.getTimeZoneList()
            this.selectTimezoneData = res || []
        },
        async selectPackage(){
            let res = await this.API.getPackageByCountry({countryName:this.country})
            this.selectPackagesData = res || []
        },
        async changeData(level,name,flag){
            console.log(level+' '+name)
            if(level=='2'){
                this.selectPackage()
            }
            if(this.form.nation=='中国'){
                this.isChina=true
                let res = await this.API.selectNextAreaByName({
                    name:encodeURI(name),
                    areaLevel:level
                })
                if(level=='2'){
                    if(flag){
                        this.form.province = ''
                        this.form.city = ''
                        this.form.county = ''
                        this.form.town = ''
                    }
                    this.selectProvinceData = res || []
                }else if(level=='3'){
                    if(flag){
                        this.form.city = ''
                        this.form.county = ''
                        this.form.town = ''
                    }
                    this.selectCityData = res || []
                }else if(level=='4'){
                    if(flag){
                        this.form.county = ''
                        this.form.town = ''
                    }
                    this.selectCountyData = res || []
                }else if(level=='5'){
                    if(flag){
                        this.form.town = ''
                    }
                    this.selectTownData = res
                }
            }else{
                this.isChina=false
                this.form.province = ''
                this.form.city = ''
                this.form.county = ''
                this.form.town = ''
            }
        },
        async remoteMethod(query){
            if(query!=''){
                this.loading = true;
                let res = await this.API.getUserListBySite({loginName:query})
                this.loading = false;
                this.selectSiteOwnData=res || []
            }else{
                this.selectSiteOwnData=[]
            }
        },
        async changeTimezone(val){
            console.log(val,'changeTimezone')
            let res = await this.API.getSummerTime({timeZoneValue:val})
            if(res.summerStartTime!=null && res.summerStartTime.indexOf(';')!=-1 && res.summerEndTime!=null && res.summerEndTime.indexOf(';')!=-1){
                // this.ifSummerTime=true
                var startArray=res.summerStartTime.split(';')
                var endArray=res.summerEndTime.split(';')
                if(startArray.length>2 && endArray.length>2){//按星期
                    this.summerType='1'
                    this.summer_form1={
                        start_summerMonth: startArray[0],
                        start_summerSort: startArray[1]>0?'1':'2',
                        start_summerNum: Math.abs(startArray[1]),
                        start_summerWeek: startArray[2],
                        start_summer_hour: startArray[3],
                        end_summerMonth: endArray[0],
                        end_summerSort: endArray[1]>0?'1':'2',
                        end_summerNum: Math.abs(endArray[1]),
                        end_summerWeek: endArray[2],
                        end_summer_hour: endArray[3],
                    }
                    this.ifSummerTime=true
                }
                this.checkVisible=false
                this.form.summerStartTime=res.summerStartTime
                this.form.summerEndTime=res.summerEndTime
                console.log(this.form,'form timezone')
            }else{
                this.checkVisible=true
                this.ifSummerTime=false
                for(let item in this.summer_form1){
                    this.summer_form1[item]=item=='start_summer_hour'||item=='end_summer_hour'?'00:00':''
                }
            }
        },
        changeSummerType(val){
            if(val=='1') this.$refs['summer_form2'].resetFields();
            if(val=='2') this.$refs['summer_form1'].resetFields();
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
                let vali_flag=true
                if(this.ifSummerTime&&this.checkVisible){
                    if(this.summerType=='1'){
                        this.$refs['summer_form1'].validate((valid2) => {
                            if(valid2){
                                let sort_start=this.summer_form1.start_summerSort==1?'':'-'
                                this.form.summerStartTime=this.summer_form1.start_summerMonth+';'+sort_start+this.summer_form1.start_summerNum+';'+this.summer_form1.start_summerWeek+';'+this.summer_form1.start_summer_hour
                                let sort_end=this.summer_form1.end_summerSort==1?'':'-'
                                this.form.summerEndTime=this.summer_form1.end_summerMonth+';'+sort_end+this.summer_form1.end_summerNum+';'+this.summer_form1.end_summerWeek+';'+this.summer_form1.end_summer_hour
                            }else{
                                vali_flag=valid2
                                return false
                            }
                        })
                    }else if(this.summerType=='2'){
                        this.$refs['summer_form2'].validate((valid2) => {
                            if(valid2){
                                this.form.summerStartTime=this.summer_form2.start_month+' '+this.summer_form2.start_hour
                                this.form.summerEndTime=this.summer_form2.end_month+' '+this.summer_form2.end_hour
                            }else{
                                vali_flag=valid2
                                return false
                            }
                        })
                    }
                    console.log(this.form.summerStartTime+'end:'+this.form.summerEndTime)
                }
                if(valid&&vali_flag) {
                    if(this.form.latitude==''||this.form.longitude==''||this.form.latitude==null||this.form.longitude==null){
                        this.$message.error(this.$t('map_validateLatLng'));
                    }else{
                        this.commitForm()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async commitForm(){
            // console.log(this.form.longitude,this.form.longitude,'this.form.longitude,this.form.longitude')
            if(typeof this.form.longitude=="number"){
                let pointType=localStorage.getItem('mapType')==1?'B':'G'
                this.$set(this.form,'latitude',pointType+this.form.latitude)
                this.$set(this.form,'longitude',pointType+this.form.longitude)
            }
            this.form.updateTime=this.$options.filters['dateFormat'](new Date())
            if(this.userType==5){
                this.form.userIds=this.userId
            }
            let res = await this.API.editSite(Object.assign({},this.form,{unbindCode:this.unbindCode}))
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.$store.commit('setVisibleEdit',false)
            this.$emit('uploadPage',true)
        },
        //打开地图
        showMap(){
            if(this.form.latitude!=null&&this.form.longitude!=''&&this.form.latitude!=''&&this.form.latitude!=null){
                let pointType=localStorage.getItem('mapType')==1?'baidu':'google'
                var transParam = this.UtilsFun.transformPoint(this.form.latitude,this.form.longitude,pointType);
                this.mapData.markers={lng:Number(transParam.longitude),lat:Number(transParam.latitude)}
                this.mapData.center=this.mapData.markers
            }else{
                this.mapData.markers={}
                this.mapData.center={lng:102,lat:23}
            }
            if(this.mapType==='1'){
                this.$store.commit('setVisibleBaiduMapSite',true)
            }else{
                this.$store.commit('setVisibleGoogleMapSite',true)
            }
        },
        getPoint(point,address){
            this.$set(this.form,'address',address)
            this.$set(this.form,'latitude',point.lat)
            this.$set(this.form,'longitude',point.lng)
        },
    }
};
</script>

<style  lang="less">
.map-tool{
    >span{
        display: inline-block;
        border: 1px solid #cacaca;
        background: #fff;
        color: #006fbb;
        .iconfont{
            display: inline-block;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 30px;
            text-align: center;
            line-height: 40px;
        }
        &:first-child{
            border-right: none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        &:last-child{
            border-left: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        &.active{
            color: #fff;
            background: #006fbb;
            border-color: #006fbb;
        }
    }
}
.label-inline{
    padding: 6px;
    line-height: 30px;
}
.form{
    .label{
        position: relative;
        text-align: center;
        margin: 8px 0;
        font-size: 14px;
        span{
            position: relative;
            padding: 0 10px;
            background: #fff;
        }
        &::before{
            content: '';
            position: absolute;
            height: 1px;
            background: #dadada;
            top: 50%;
            left: 12px;
            right: 12px;
        }
    }
}
.icon-nmi{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
}
.nmi_checkbox .el-checkbox__label{
    white-space: break-spaces;
    font-size: 12px;
}
.el-checkbox__label {
    white-space: normal;
}
</style>
